<template>
    <div>
        <div class="register_con">
		<div class="l_con fl">
			<a class="reg_logo"><img src="../assets/images/logo.png"></a>
			<div class="reg_slogan">足不出户  ·  新鲜每一天</div>
			<div class="reg_banner"></div>
		</div>

		<div class="r_con fr">
			<div class="reg_title clearfix">
				<h1>用户注册</h1>
				<a href="#">登录</a>
			</div>
			<div class="reg_form clearfix">
				<form>
				<ul>
					<li>
						<label>用户名:</label>
						<input type="text" name="user_name" id="user_name" v-model="username" @blur="username_blur">
						<span class="error_tip">{{username_error}}</span>
					</li>					
					<li>
						<label>密码:</label>
						<input type="password" name="pwd" id="pwd" v-model="password">
						<span class="error_tip"></span>
					</li>
					<li>
						<label>确认密码:</label>
						<input type="password" name="cpwd" id="cpwd" v-model="re_password">
						<span class="error_tip"></span>
					</li>
					<li>
						<label>邮箱:</label>
						<input type="text" name="email" id="email" v-model="email">
						<span class="error_tip"></span>
					</li>
                    <li>
						<label>手机:</label>
						<input type="text" name="phone" id="phone" v-model="phone">
						<span class="error_tip"></span>
					</li>
                    <li>
						<label>地址:</label>
						<input type="text" name="address" id="address" v-model="address">
						<span class="error_tip"></span>
					</li>


					<li class="agreement">
						<input type="checkbox" name="allow" id="allow" checked="checked" v-model="allow">
						<label>同意<a href='#'>《好又多用户使用协议》</a></label>
						<span class="error_tip2">{{allow_error}}</span>
					</li>
					<li class="reg_sub">
						<input type="button" value="注 册" name="" @click="register">
					</li>
				</ul>				
				</form>
			</div>

		</div>

	</div>

	<div class="footer no-mp">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京趣活信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-51851888    京ICP备*******8号</p>
	</div>
    </div>
</template>

<script>
// import '../assets/css/reset.css'
// import '../assets/css/main.css'


import axios from 'axios'

export default {
    data() {
        return {
           username:"岳飞",
			password:"123",
			re_password:"123",
			email:"diaochan@126.com",
			allow:"",
			phone:"18819029988",
			address:"北京市东城区长安大街3号院",
			
			username_error:"",
			password_error:"",
			re_password_error:"",
			email_error:"",
			allow_error:"",
			phone_error:"",
			address_error:"",
        }
    },
    methods: {

        username_blur(){
			axios.get("http://192.168.1.41/user/user/",{'params':{'username':this.username}}).then(resp=>{
				console.log(resp.data)
				if(resp.data.status!=200){
					this.username_error="用户名已存在"
				}else{
					this.username_error="√"
				}
			}).catch(error=>{
				console.log(error)
			})
		},


        register(){
            //判断都不为空
            if(this.username==""){
                this.username_error="用户名为空"
                return
            }else{
				this.username_error=""
			}
            
            if(this.password!=this.re_password){
                this.re_password_error="两次密码不一致"
                return
            }else{
				this.re_password_error=""
			}
            //同意协议
            if(!this.allow){
                alert("您未同意协议")
                return 
            }

            const data={
                username:this.username,
                password:this.password,
                phone:this.phone,
                address:this.address,
                email:this.email
            }
            axios.post("http://192.168.1.41/user/register/",data).then(resp=>{
                console.log(resp.data)
                if(resp.data.status==200){
                    alert("恭喜你注册成功")
                }else{
                    alert("注册失败")
                }

            }).catch(error=>{
				console.log(error)
            })
        }
    },
    created() {

    }
}
</script>

<style scoped>

</style>
